<template>
  <div>
    <Nav :paths="paths"></Nav>
    <br>
    <el-card class="box-card">
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          width="30">
        </el-table-column>
        <el-table-column
          label="编号"
          width="230">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{scope.row.order_number }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单价格"
          width="150">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.order_price }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="是否支付"
          width="130">
          <template slot-scope="scope">
            <el-button @click="self[modifyState](scope.row);open('更新订单成功', 'success')" :type="scope.row.order_pay==='1' ? 'success':'danger'" >{{scope.row.order_pay=='1' ? '已支付':'未支付'}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
          label="是否发货"
          width="100">
          <template slot-scope="scope">
            <el-tag size="medium">{{ scope.row.is_send }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="下单时间"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ getLocalTime(scope.row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
          width="220">
          <template slot-scope="scope">
            <el-button
              :fd="scope"
              size="mini"
              @click="$refs.Address.isOpen=true">修改地址</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="getLogisticsInfo(scope.row.order_id)">物流信息</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[6, 7, 8]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <Address ref="Address"/>
      <LogisticsInfo ref="LogisticsInfo" />
    </el-card>
  </div>
</template>

<script lang="ts">
import Nav, { paths } from '../Nav'
import { CHANGE_NUM, CHANGE_SIZE, GET_ALL_ORDER, GET_LOGISTICS_INFO, MODIFY_ORDER_STATUS } from '@/store/order/const'
import { createNamespacedHelpers } from 'vuex'
import { Component, Vue } from 'vue-property-decorator'
import Address from '@/components/order/Address.vue'
import LogisticsInfo from '@/components/order/LogisticsInfo.vue'
import { getAllGoods } from '@/api/goods'
const { mapActions } = createNamespacedHelpers('order')

@Component({
  components: { LogisticsInfo, Nav, Address },
  methods: {
    ...mapActions([GET_ALL_ORDER, MODIFY_ORDER_STATUS])
  }
})
export default class Oder extends Vue {
  constructor (...arg: any) {
    super(...arg)
    this.getData()
    // setTimeout(() => {
    //   console.log(this.tableData)
    // }, 200)
  }

  public self = this
  public modifyState = MODIFY_ORDER_STATUS

  public get tableData () {
    return this.$store.state.order.orders
  }

  public get pageNum () {
    return this.$store.state.order.pagenum
  }

  public get pageSize () {
    return this.$store.state.order.pagesize
  }

  public get total () {
    return this.$store.state.order.count
  }

  handleCurrentChange (num:number) {
    this.$store.commit('order/' + CHANGE_NUM, num)
    this.getData()
  }

  handleSizeChange (size:number) {
    this.$store.commit('order/' + CHANGE_SIZE, size)
    this.getData()
  }

  open (
    smg = '登陆成功',
    type: 'success' | 'warning' | 'info' | 'error' = 'success'
  ) {
    this.$message({
      message: smg,
      type: type
    })
  }

  // 面包屑
  public paths: paths = [
    {
      path: '/index',
      pName: '首页'
    },
    {
      path: '/index/orders',
      pName: '订单管理'
    },
    {
      path: '/index/orders',
      pName: '订单列表'
    }
  ]

  getData () {
    console.log(this.pageSize, this.pageNum)
    this.$store.dispatch('order/' + GET_ALL_ORDER, { pagenum: this.$store.state.order.pagenum, pagesize: this.$store.state.order.pagesize })
  }

  getLocalTime (nS:number) {
    return new Date(nS * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ')
  }

  getLogisticsInfo (id:number) {
    // this.$store.dispatch('order/' + GET_LOGISTICS_INFO, id)
    (this.$refs.LogisticsInfo as any).isOpen = true
  }
}
</script>

<style scoped>

</style>
